<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { BasicModal } from '@/components/Modal';
  import { EditContactApi } from '@/api/user';
  import { message } from 'ant-design-vue';
  import { useUserStore } from '@/store/modules/user';

  const { getUserInfo, setUserInfo } = useUserStore();
  const formState = ref({
    contact: '',
  });

  onMounted(() => {
    formState.value.contact = getUserInfo.contact;
  });

  function EditContact() {
    EditContactApi(formState.value.contact).then(() => {
      setUserInfo({ contact: formState.value.contact, ...getUserInfo });
      message.success('修改成功');
    });
  }
</script>

<template>
  <BasicModal width="1000px" v-bind="$attrs" @ok="EditContact" title="修改联系方式">
    <a-form>
      <a-form-item label="联系方式" required>
        <a-input placeholde="请输入任意联系方式" v-model:value="formState.contact" />
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
